<template>
  <!-- 审核中心  begin -->
  <div class="main main-user-identify" id="main_check_identify">
    <div class="main-hd">
      <h2>{{ this.$t("m.Shěnhézhōngxīn") }}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <!-- 认证申请列表 begin -->
        <div class="list user-identify-list" id="check_identify_list">
          <h3 class="titleColor">{{ this.$t("m.dāngqiánzhōngshěnlièbiǎo") }}</h3>

          <Table border ref="selection" :columns="chuShenList" :data="chuShenData"></Table>
        </div>

        <!--用户详细资料end-->
        <Modal v-model="baseInfoBox" width="70%">
          <div slot="header" class="zhongShenButton">
            <span>{{ $t("m.yònghùrènzhèngzīliào") }}</span>
            <div class="zhongShenButtonBox">
              <button class="btn" @click="zhongShenPassEvent()">
                {{ $t("m.yījiànlāhēi") }}
              </button>

            </div>
          </div>
          <div class="details_head">
            <div class="passButton">
              <button class="btn btn-success details_head_first" @click="passEvent()">
                {{ $t("m.pass") }}
              </button>
              <button class="btn btn-danger" @click="refuse()">
                {{ $t("m.refuse") }}
              </button>
              <Input type="text" class="remark_inprt" v-model="remarkInfo" v-bind:placeholder="$t('m.qǐngtiánxiěshěnpībèizhù')" />
            </div>
          </div>

          <base-info :userId="baseInfoUserId" :orderGid="baseInfoOrderGid" :baseType="baseInfoType" v-if="baseInfoBox"></base-info>
          <div slot="footer"></div>
        </Modal>
        <Modal v-model="passModel" @on-ok="passOk" @on-cancel="">
          <p style="font-size: 20px">{{ $t("m.qǐngquèrèntōngguò") }}</p>
        </Modal>
        <Modal v-model="zhongShenRefuseBox" :title="this.$t('m.qǐngshūrùjùjuéyuányīn')" @on-ok="zhongShenRefuseBoxOk" @on-cancel="zhongShenRefuseBoxCancel">
          <input v-model="mytext" type="text" class="form-control" id="name" :placeholder="this.$t('m.qǐngshūrùjùjuéyuányīn')" />
        </Modal>

        <Modal v-model="guaQiModel" @on-ok="cguaQi" @on-cancel="">
          <p style="font-size: 20px">确定挂起？</p>
        </Modal>

      </div>
    </div>
  </div>
  <!-- 审核中心 end -->
</template>

<script>
import BaseInfo from './common/baseInfo'
export default {
  name: 'zhongShen',
  components: {
    BaseInfo
  },
  data () {
    return {
      baseInfoType: "2",
      baseInfoUserId: '',
      baseInfoOrderGid: '',
      baseInfoBox: false,
      zhongShenRefuseBox: false,
      mytext: '',
      orderGid: '',
      chuShenData: [],
      userIdentiInfo: {},
      reqId: '',
      passModel: false,
      guaQiModel: false,
      remarkInfo: '',
      chuShenList: [
        // {
        //   type: 'selection',
        //   width: 50,
        //   align: 'center'
        // },
        {
          title: this.$t('m.userNumber'),
          key: 'userId',
          width: 200,
          align: 'center',
        },
        {
          title: this.$t('m.orderGid'),
          key: 'orderGid',
          width: 200,
          align: 'center',
        },
        {
          title: this.$t('m.cName'),
          key: 'fullName',
          width: 200,
          align: 'center',
          // className: 'cleanTitle',
          // render: (h, params) => {
          //   if (params.row.levelId >1) {
          //     return h("div", {
          //       domProps: {
          //         innerHTML: `<span>` + params.row.phone + `</span>` + `<span class='twoLoans'>` + params.row.levelName + `</span>` //渲染html内容
          //       }
          //     })
          //   } else {
          //     return h("div", {
          //       domProps: {
          //         innerHTML: `<span>` + params.row.phone + `</span>` //渲染html内容
          //       }
          //     })
          //   }
          // },
        },
        {
          title: this.$t('m.phone'),
          key: 'phone',
          width: 200,
          align: 'center',
          render: (h, params) => {
            if (params.row.levelId > 1) {
              return h("div", {
                domProps: {
                  innerHTML: `<span>` + params.row.phone + `</span>` + `<span class='twoLoans'>` + params.row.levelName + `</span>` //渲染html内容
                }
              })
            } else {
              return h("div", {
                domProps: {
                  innerHTML: `<span>` + params.row.phone + `</span>` //渲染html内容
                }
              })
            }
          },
        },
        {
          title: this.$t('m.applyTime'),
          key: 'ctime',
          width: 200,
          align: 'center'
        },
        {
          title: this.$t('m.loanMount'),
          key: "loanAmount",
          align: "center",
          width: 200,
          // width: '80'
        },
        {
          title: this.$t('m.loanTimeLimit'),
          key: 'loanDays',
          align: 'center',
          width: 200,
          // width: '80'
        },
        {
          title: this.$t('m.zsry'),
          key: 'checkerFirst',
          align: 'center',
          width: 200,
          // width: '80'
        },
        {
          title: this.$t('m.operate'),
          key: 'action',
          fixed: 'right',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                    type: "success",
                    size: "small",
                    long: true
                },
                style: {
                    marginBottom: "10px",
                },
                on: {
                  click: () => {
                    this.viewDetails(params.row.userId, params.row.orderGid)
                  }
                }
              }, this.$t('m.userDetails')),
            ]);
          }
        }
      ],
    }
  },
  methods: {
    passEvent () {
        this.passModel = true;
      // if (this.remarkInfo) {
      // } else {
      //   this.$Message.error(this.$t('m.qǐngshūrùbèizhù'));
      // }
    },
    // 点击拒绝按钮 出现拒绝弹框
    refuse () {
      if (this.remarkInfo) {
        this.zhongShenRefuseBox = true;
      } else {
        this.$Message.error(this.$t('m.qǐngshūrùbèizhù'));
      }
    },
    zhongShenRefuseBoxCancel () {
      this.zhongShenRefuseBox = false
      // this.baseInfoBox = false
      this.mytext = ''
    },
    // 通过
    passOk () {
      this.$http.post('/api/laocai/check/final/pass', {
        orderGid: this.orderGid,
        remarkInfo: this.remarkInfo
      }).then((res) => {
        if (res.body.code == 0) {
          this.getchuShen();
          this.baseInfoBox = false
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    // 查看详情
    viewDetails (userId, orderGid) {
      this.baseInfoOrderGid = orderGid
      this.baseInfoUserId = userId
      this.orderGid = orderGid
      this.baseInfoBox = true
      this.remarkInfo = ''
    },
    // 拒绝确定
    zhongShenRefuseBoxOk: function () {
      // alert("111")
      this.$http.post('/api/laocai/check/final/reject', {
        rejectReason: this.mytext,
        orderGid: this.orderGid,
        remarkInfo: this.remarkInfo
      }).then((res) => {
        if (res.body.code == 0) {
          this.getchuShen()
          this.zhongShenRefuseBox = false
          this.baseInfoBox = false
          this.mytext = ''
        } else {
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
        }
      })
    },
    cguaQi () {
      this.$http.post('/api/laocai/check/first/hangup/add', {
        orderGid: this.orderGid
      }).then((res) => {
        if (res.body.code == 0) {
          this.getchuShen();
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      })
    },
    //终审列表
    getchuShen (page) {
      var url1 = '/api/laocai/check/order-list?status=pass_first';
      this.$http.get(url1).then((res) => {
        if (res.body.code == 0) {
          this.chuShenData = res.body.result.list
          this.userIdentiInfo = res.body.result.list[0]
          this.callLog = res.body.result.list
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
  },
  mounted: function () {
    this.getchuShen();
  },
  watch: {}
}
</script>

<style>
@import "../static/style.css";
@import "../static/common.scss";

.details_head {
  overflow: hidden;
}

.passButton button{
  margin-top: 0px;
}
.passButton .btn-success {
  /* margin-left: 80px; */
  margin-left: 13%;
}
.remark_inprt {
  margin-left: 50px;
  width: 25%;
}
.btn-wrapper {
  margin-top: 12px;
  text-align: right;
}

.btn-wrapper a:hover,
.btn-wrapper a:active,
.btn-wrapper a:visited {
  color: #ffffff;
}

.titleColor {
  color: #515a6e;
  margin-bottom: 10px;
}

.zhongShenButtonBox {
  text-align: right;
  float: right;
  margin-right: 60px;
}

.zhongShenButton {
  /* text-align: center; */
  height: 33px;
  line-height: 33px;
}

.twoLoans {
  color: #fff;
  background: rgb(226, 61, 103);
  padding: 0px 5px;
  display: inline-block;
  border: rgb(226, 61, 103);
  margin-left: 5px;
  /* height: 20px; */
  font-size: 12px;
}
</style>
